<template>
	<u-popup v-model="visible" mode="bottom" @close="onClose" :border-radius="24"
		:closeable="true" close-icon-color="#fff">
		<view class="v-fill flex-v">
			<view class="header">购买须知</view>
			<scroll-view scroll-y class="flex-extend" style="max-height: 1000rpx">
				<view class="pad-base">
					<view class="u-font-lg uni-bold">{{sku.name || '-'}}</view>
					<view v-if="sku.time_limit" class="uni-text-gray">
						使用有效期：
						<text v-if="sku.time_limit.type === 'relative'">至购买日起{{sku.time_limit.value}}天</text>
						<text v-else>至{{$formatTime(sku.time_limit.value)}}</text>
					</view>
					<view v-if="sku.purchaseNotes && sku.purchaseNotes.length" class="mg-t-sm">
						<view class="mg-b-xs uni-bold u-font-lg">购买须知</view>
						<view v-if="sku.purchaseNotes">
							<view v-for="(item, idx) in sku.purchaseNotes" :key="idx" class="flex-h mg-b-xs">
								<view class="note-name">
									<view class="note-name-strong">{{item.name}}</view>
								</view>
								<text class="uni-text-gray flex-extend">{{item.desc}}</text>
							</view>
						</view>
					</view>
					<view v-if="sku.costNotes && sku.costNotes.length" class="mg-t-sm">
						<view class="mg-b-xs uni-bold u-font-lg">费用说明</view>
						<view v-if="sku.costNotes">
							<view v-for="(item, idx) in sku.costNotes" :key="idx" class="flex-h mg-b-xs">
								<view class="uni-text-gray note-name">{{item.name}}</view>
								<text class="uni-text-gray flex-extend">{{item.desc}}</text>
							</view>
						</view>
					</view>
					<view v-if="sku.useNotes && sku.useNotes.length" class="mg-t-sm">
						<view class="mg-b-xs uni-bold u-font-lg">使用说明</view>
						<view v-if="sku.useNotes">
							<view v-for="(item, idx) in sku.useNotes" :key="idx" class="flex-h mg-b-xs">
								<view class="uni-text-gray note-name">{{item.name}}</view>
								<text class="uni-text-gray flex-extend">{{item.desc}}</text>
							</view>
						</view>
					</view>
					<view v-if="sku.otherNotes && sku.otherNotes.length" class="mg-t-sm">
						<view class="mg-b-xs uni-bold u-font-lg">其他说明</view>
						<view v-if="sku.otherNotes">
							<view v-for="(item, idx) in sku.otherNotes" :key="idx" class="flex-h mg-b-xs">
								<view class="uni-text-gray note-name">{{item.name}}</view>
								<text class="uni-text-gray flex-extend">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view>
				<u-line></u-line>
			</view>
			<view @click="handleClose" class="h-box justify-center u-font-md" style="height: 105rpx;">关闭</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				visible: false
			};
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			sku: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		watch: {
			value(newVal) {
				this.visible = newVal
			}
		},
		mounted() {
			this.visible = this.value
		},
		methods: {
			handleClose() {
				this.visible = false
				this.$emit('input', this.visible)
			},
			onClose() {
				this.$emit('input', this.visible)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: linear-gradient(270deg, #8E77F5 0%, #434AD8 100%);
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		height: 110rpx;
		line-height: 110rpx;
	}
	.note-name {
		width: 180rpx;
		&-strong {
			width: 160rpx;
			border-radius: 6px;
			border: 1px solid #D61719;
			text-align: center;
			color: #D61719;
			font-size: 22rpx;
		}
	}
</style>
